<div class="modal-header">
    <h4>更改模型头像</h4>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="onClose()">
        <span>&times;</span>
    </button>
</div>

<div class="modal-body">
    <div class="row">
        <div class="col-md-3">
            <mat-card style="width: 100px; height: 100px">
                <img matCardImage src="{{selectedImgDataUrl}}" alt="blank">
            </mat-card>
        </div>
        <div class="col-md-9">
            <div>
                <input type="file" ng2FileSelect [uploader]="fileSelect" accept=".jpg, .jpeg, .png, .gif" />
            </div>
            <div>
                <span style="font-size: smaller">图片文件大小限制在20KB以下，尺寸长宽比为1:1，建议200x200像素</span>
            </div>
            <br>
            <div>
                <span>或者：<button (click)="getRandomPicture()">生成随机图像</button></span>
            </div>
            <br>
            <div>
                或者从下列图标中进行选择：
            </div>
        </div>
    </div>

    <br>
    <mat-card>
        <mat-grid-list cols="8" rowHeight="1:1" >
            <mat-grid-tile *ngFor="let imgName of imgNames">
                <mat-card style="width: 20px; height: 20px">
                    <a (click)="selectImg(imgName)">
                        <img matCardImage src="{{imgUriPrefix}}{{imgName}}" matTooltip="{{imgName}}">
                    </a>
                </mat-card>
            </mat-grid-tile>
        </mat-grid-list>
    </mat-card>
</div>

<div class="modal-footer">
    <button mat-raised-button (click)="onClose()">
        <span class="fa fa-ban">&nbsp;取消</span>
    </button>
    <button mat-raised-button color="primary" (click)="onSave()">
        <span class="fa fa-check-circle">&nbsp;确定</span>
    </button>
</div>

